<template>
	<b-layout-index>

		<navbar title=" "></navbar>
		<view>
			<view class="pd-20 text-center">
				<view class="font-size-18 font-bold">{{$t('添加银行卡')}}</view>
				<view class="font-size-12">{{$t('请绑定持卡人本人的银行卡')}}</view>

			</view>

			<view class="pd-20">
				<u--form :borderBottom="false" :model="param" :rules="rules" ref="form1">
					<u-form-item prop="name">
						<view>

							<view class="input br-rd-6 ">
								<u-cell :border="false">
									<iconfont slot="icon" color="#14313f" icon="icon-wode" />
									<!-- 	<input :value="param.password" slot="title" type="password"
					placeholder="请输入密码" class="pd-left-10 pd-right-10" /> -->
									<u--input v-model="param.name" suffixIcon="info-circle" color="#14313f" slot="title"
										class="pd-left-10 pd-right-10 inputcolor ltr  font-size-12" :placeholder="$t('请输入持卡人')"
										border="none">
									</u--input>
								</u-cell>
							</view>

						</view>
					</u-form-item>
					<u-form-item prop="phone">
						<view>

							<view class="input br-rd-6 ">
								<u-cell :border="false">
									<iconfont slot="icon" color="#14313f" icon="icon-shouji" />
									<!-- 	<input :value="param.password" slot="title" type="password"
					placeholder="请输入密码" class="pd-left-10 pd-right-10" /> -->
									<u--input v-model="param.phone" suffixIcon="info-circle" color="#14313f"
										slot="title" class="pd-left-10 pd-right-10 inputcolor ltr  font-size-12"
										:placeholder="$t('请输入手机号')" border="none">
									</u--input>
								</u-cell>
							</view>

						</view>
					</u-form-item>
					<u-form-item prop="bankId">
						<view>

							<view class="input br-rd-6 ">
								<u-cell @click="show = true" :border="false">
									<iconfont slot="icon" :color="param.color" :icon="param.bankIcon" />

									<!-- 	<input :value="param.password" slot="title" type="password"
						placeholder="请输入密码" class="pd-left-10 pd-right-10" /> -->
									<u--input :readonly="true" v-model="param.bankName" suffixIcon="arrow-down"
										color="#14313f" slot="title" class="pd-left-10 pd-right-10 inputcolor ltr  font-size-12"
										:placeholder="$t('请选择银行')" border="none">
									</u--input>
								</u-cell>
							</view>

						</view>
					</u-form-item>
					<u-form-item prop="cardNo" v-if="param.status==0">
						<view>

							<view class="input br-rd-6 ">
								<u-cell :border="false">
									<iconfont slot="icon" color="#14313f" icon="icon-tuisong" />
									<!-- 	<input :value="param.password" slot="title" type="password"
						placeholder="请输入密码" class="pd-left-10 pd-right-10" /> -->
									<u--input v-model="param.cardNo" suffixIcon="info-circle" color="#14313f"
										slot="title" class="pd-left-10 pd-right-10 inputcolor ltr  font-size-12"
										:placeholder="$t('请输入银行卡号')" border="none">
									</u--input>
								</u-cell>
							</view>

						</view>
					</u-form-item>
					<u-form-item prop="address" v-if="param.status==0">
						<view>

							<view class="input br-rd-6 ">
								<u-cell :border="false">
									<iconfont slot="icon" color="#14313f" icon="icon-weizhi" />
									<!-- 	<input :value="param.password" slot="title" type="password"
						placeholder="请输入密码" class="pd-left-10 pd-right-10" /> -->
									<u--input suffixIcon="info-circle" v-model="param.address" color="#14313f"
										slot="title" class="pd-left-10 pd-right-10 inputcolor ltr font-size-12  font-size-12"
										:placeholder="$t('请输入办卡地址')" border="none">
									</u--input>
								</u-cell>
							</view>
						</view>
					</u-form-item>

					<u-form-item prop="imageId" v-if="param.status==2">
						<image @click="openFile" class="uploadImage br-rd-10" mode="aspectFit" :src="param.imageUrl">
						</image>
					</u-form-item>
					<view class="pd-20">
						<u-button @click="sendData" shape="circle" :color="color.primary" :text="$t('确定')"></u-button>

					</view>
				</u--form>
			</view>


		</view>

		<u-action-sheet @close="closeOp" round="10" :closeOnClickOverlay="true" :cancelText="$t('取消')"
			:title="$t('请选择银行')" :closeOnClickAction="true" :show="show">
			<view style="text-align: justify;">
				<u-cell-group>

					<u-cell @click="selectedClick(item)" v-for="(item,index) in cardList">
						<iconfont slot="icon" :color="item.color" size="25" :icon="item.icon" />
						<view slot="title" class="pd-left-5 pd-right-5">{{item.name}}</view>
					</u-cell>

				</u-cell-group>
			</view>
		</u-action-sheet>

	</b-layout-index>
</template>

<script>
	import {
		getByBanksList,
		findByEditMyBank
	} from "@/api/bank.js"
	import {
		getAuthInfo
	} from "@/api/user.js"
	import {
		baseUrl
	} from "@/common/config.js"
	export default {
		data() {
			var userInfo = uni.getStorageSync("userInfo")
			return {
				show: false,
				cardList: [],
				fileList: [],
				param: {
					cardNo: "",
					bankId: "",
					bankName: "",
					name: '',
					phone: userInfo.phone,
					imageId: 0,
					imageUrl: "/page/usercenter/static/img/qrwimage.png",
					bankIcon: "icon-tuisong",
					color: "#14313f",
					status: -1,
					address: ""

				},
				rules: {
					'name': [{
						type: 'string',
						required: true,
						message: this.$t('请填写姓名'),
						trigger: ['blur', 'change']
					}, {
						pattern: /^[\u4e00-\u9fa5·]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: this.$t('姓名不正确'),
						trigger: ['blur', 'change']
					}],
					"imageId": [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							console.log(this.param)

							if (this.param.status == 2) {
								if (value == 0) {
									return callback(new Error(this.$t('收款码不能为空')))
								} else {
									callback()
								}
							} else {
								callback()
							}

							//	return uni.$u.test.mobile(value);
						},
						message: this.$t('收款码不能为空'),
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}],
					// 字段名称
					"address": [{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							console.log(this.param)

							if (this.param.status == 0) {
								if (!value) {
									return callback(new Error(this.$t('地址不能为空')))
								} else {
									callback()
								}
							} else {
								callback()
							}

							//	return uni.$u.test.mobile(value);
						},
						message: this.$t('地址不能为空'),
						// 触发器可以同时用blur和change
						trigger: ['blur', 'change'],
					}],
					// 字段名称
					"phone": [{
							required: true,
							message: this.$t('请输入手机号'),
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: this.$t('手机号码不正确'),
							// 触发器可以同时用blur和change
							trigger: ['blur', 'change'],
						}

					],
					// 字段名称
					"cardNo": [{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								const strBin =
									'10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99'
								console.log("HHHHHHHHHHHH", value == "")
								if (this.param.status == 0) {
									if (!value) {
										return callback(new Error(this.$t('收款账户不能为空')))
									} else if (!Number.isInteger(+value)) {
										callback(new Error(this.$t('银行卡号必须全为数字')))
									} else if (value.trim().length < 12 || value.trim().length > 19) {
										callback(new Error(this.$t('银行卡号长度必须在{0}到{1}之间',[10,19])))
									} else if (strBin.indexOf(value.substring(0, 2)) === -1) {
										callback(new Error(this.$t('银行卡号开头{0}位不符合规范',[6])))
									} else {
										callback()
									}
								} else {
									callback()
								}
							},
							message: this.$t('银行卡号不正确'),
							// 触发器可以同时用blur和change
							trigger: ['blur'],
						}

					]



				},
			}


		},
		onLoad: function() {
			this.getByAuthInfo()
			this.getData()

		},
		methods: {
			openFile: function() {
				var the = this;
				uni.chooseImage({
					success: function(e) {
						var tempFile = e.tempFiles[0]
						console.log(e)
						uni.showLoading()
						the.uploadFilePromise(tempFile.path)
					}
				})

			},
			getByAuthInfo: function() {
				var the = this;
				getAuthInfo().then(res => {
					the.param.name = res.name
				})

			},
			getData: function() {
				var the = this;
				getByBanksList().then(res => {
					console.log(res)
					the.cardList = res;
				})
			},
			selectedClick: function(e) {

				console.log(e)
				this.param.bankName = e.name;
				this.param.bankId = e.id;
				this.param.color = e.color;
				this.param.bankIcon = e.icon;
				this.param.status = e.status
				this.show = false;
			},
			closeOp: function() {
				this.show = false;
			},
			openWeizhi: function() {
				uni.chooseAddress({
					success: function(e) {
						console.log(e)
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				var file = event.file
				//let fileListLen = this[`fileList${event.name}`].length
				this[`fileList${event.name}`] = {
					...item,
					status: 'uploading',
					message: '上传中'
				}

				const result = await this.uploadFilePromise(file.url)
				let item = this[`fileList${event.name}`]
				console.log("KKKKKKKKKKKKKKKKK", item, result)
				this[`fileList${event.name}`] = {
					...item,
					status: 'success',
					message: '',
					url: result.url
				}
				let item1 = this[`fileList${event.name}`]

				console.log("KKKKKKKKKKKKKKKKK1", item1)

			},
			uploadFilePromise(url) {
				var the = this;

				let a = uni.uploadFile({
					url: baseUrl + "/upload/image", // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						name: 'pyqrcode'
					},
					success: (res) => {
						var data = JSON.parse(res.data);
						console.log("HHHHHHHHHHHHHHH", data)
						var ffd = data.data
						the.param.imageId = ffd.id
						the.param.imageUrl = ffd.url
						uni.hideLoading()
					}
				});

			},
			sendData: function() {
				var the = this;
				var param = this.param;

				this.$refs.form1.validate().then(res => {
				//	uni.$u.toast('校验通过')
					console.log(param)
					findByEditMyBank(param).then(res => {
						uni.navigateBack({
							delta: 1,
							fail: function() {
								uni.redirectTo({
									url: "/pages/index/index"
								})
							}
						})
					})

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('校验失败')
				})
			} 
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form1.setRules(this.rules)
		}
	};
</script>

<style>
	page {
		background-color: #eee !important;
		color: #14313f !important;

	}
	.input {
		background-color: #3c9cff0f;
		direction: ltr !important;
	}

	.inputcolor {
		color: #14313f !important;
	}

	.uploadImage {
		background-color: #eee;
		height: 150px;
	}
</style>